<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function(){
            var td=new Vue({
                el:'#td-4',
                methods: {
                    addthing: function () {
                        this.todos.push({name: this.thing, done: false});

                    },
                    switchdel: function (idx) {
                        this.todos[idx].done = !this.todos[idx].done;

                    },


                },
                data: {
                    thing:null,
                    todos: [
                        {name: '吃饭', done: false},
                        {name: '睡觉', done: false},
                        {name: '哈哈哈', done: true}
                    ]


                },
                computed:{
                    done:function(){
                        var count=0;
                        for(var i=0;i<this.todos.length;i++){
                            if(this.todos[i].done){
                                count++;
                            }
                        }
                        return count;
                    }
                }
                });

        }

    </script>
    <style>.del{text-decoration:line-through}</style>
</head>
<body>
  <div id="td-4">
      <input type="text" v-model="thing">
      <button v-on:click="addthing ">添加</button>
    <div v-for="(todo,idx) in todos">
        <input type="checkbox" v-bind:checked="todo.done" v-on:click="switchdel(idx)">{{idx}}.
        <span v-bind:class="{del:todo.done}">
            {{todo.name}}
        </span>

    </div>
      总共{{todos.length}}个事项，{{done}}个已完成,{{todos.length-done}}个未完成。
  </div>
</body>
</html>